<template>
    <div>
        <div class="query" style="float: left">
            <span>查找客户</span>
            <el-input
                v-model="newQueryValue"
                placeholder="请输入客户名称"
                style="width: 300px"
            ></el-input>
            <el-button type="success" @click="query" class="queryCustom"
                >查找</el-button
            >
            <!-- <el-button type="danger">添加</el-button> -->
        </div>
        <div class="list">
            <el-table :data="alluser" border style="width: 85%">
                <el-table-column fixed prop="_id" label="编号" width="260">
                </el-table-column>
                <el-table-column fixed prop="name" label="姓名" width="250">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="235">
                </el-table-column>
                <el-table-column
                    prop="salespersonsId.names"
                    label="所属销售员"
                   
                >
                </el-table-column>
            </el-table>
            <div>
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("users");
export default {
    mounted() {
        this.setId("");
        this.setSalespersonsId('603c47f7cd0900004d007a82');
        this.getUsers();
    },
    computed: {
        ...mapState(["currentPage", "pageSize", "alluser", "total", "value"]),
        newQueryValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.setValue(val);
            },
        },
    },
    methods: {
        ...mapMutations(["setPageSize", "setCurrentPage", "setId", "setValue",'setSalespersonsId']),
        ...mapActions(["getUsers"]),
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.setPageSize(val);
            this.getUsers();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.setCurrentPage(val);
            this.getUsers();
        },
        query() {
            this.setCurrentPage(1);
            this.getUsers();
        },
    },
};
</script>

<style lang="scss">
.queryCustom{
    width: 100px;
    line-height: 30px;
}
.el-table--border th .cell,
.el-table--border td .cell {
    text-align: center;
    line-height: 40px;
    font-size: 17px;
    .el-button {
        font-size: 17px;
        margin: 5px;
    }
}
.query{
    margin: 20px 0 !important;
    span,.el-input,.el-button{
        margin-right: 20px !important;
    }
}
</style>